<script setup>
	import { computed, onMounted, ref } from 'vue'
	import { func } from '../../uni_modules/uv-ui-tools/libs/function/test'
	import { useConsultStore } from '@/stores/consult'
	import { storeToRefs } from 'pinia'
	const { initalValue, consultValue, type, illnessType, depId } = storeToRefs(
		useConsultStore()
	)
	const props = defineProps({
		type: String,
		illnessType: String,
		depId: String,
	})
	const illnessTimes = [
		{ value: 1, text: '一周内' },
		{ value: 2, text: '一月内' },
		{ value: 3, text: '半年内' },
		{ value: 4, text: '半年以上' },
	]
	const consultFlags = [
		{ value: 1, text: '就诊过' },
		{ value: 0, text: '没有就诊过' },
	]
	const fileLists = ref([])
	const nexStep = computed(
		() =>
			consultValue.value.consultFlag !== '' &&
			consultValue.value.illnessDesc !== '' &&
			consultValue.value.illnessTime !== ''
	)
	function onTimeTagClick(value) {
		consultValue.value.illnessTime = value
	}
	function onFlagTagClick(value) {
		consultValue.value.consultFlag = value
	}
	function nextStep() {
		type.value = props.type
		illnessType.value = props.illnessType
		depId.value = props.depId
		uni.navigateTo({
			url: '/subpkg_consult/patient/index',
		})
	}
	onMounted(async () => {
		if (consultValue.value.illnessTime) {
			const { confirm } = await uni.utils.modal(
				'温馨提示',
				'是否恢复之前填写的病情信息'
			)
			console.log(confirm);
			
			if (!confirm) {
				consultValue.value = { ...initalValue.value }
			}
		}
	})

</script>
<template>
	<scroll-page backgroundColor="#F6F7F9">
		<view class="description-page">
			<view class="doctor-online">
				<image
					class="doctor-avatar"
					src="/static/uploads/doctor-avatar-2.png"
					mode=""
				></image>
				<view class="doctor-contcat">
					<view class="name">在线医生</view>
					<view class="message">
						请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
					</view>
					<view class="tips">
						<text class="iconfont icon-shield"></text>
						内容仅医生可见
					</view>
				</view>
			</view>
			<view class="patient-info">
				<uni-easyinput
					class="input"
					type="textarea"
					:input-border="false"
					:clearable="false"
					v-model="consultValue.illnessDesc"
					:styles="{ backgroundColor: '#f6f6f6' }"
					placeholder="请详细描述您的病情,病情描述不能为空"
					placeholder-style="font-size: 30rpx; color: #979797"
				/>
			</view>
			<view class="consult"> 本次患病多久了？ </view>
			<view class="tags">
				<view
					class="tag"
					v-for="item in illnessTimes"
					:key="item.value"
					@click="onTimeTagClick(item.value)"
					:class="{ active: consultValue.illnessTime === item.value }"
				>
					{{ item.text }}
				</view>
			</view>

			<view class="consult">此次病情是否去医院就诊过？</view>
			<view class="tags">
				<text
					class="tag"
					v-for="item in consultFlags"
					:key="item.value"
					:class="{ active: consultValue.consultFlag === item.value }"
					@click="onFlagTagClick(item.value)"
					>{{ item.text }}</text
				>
			</view>
			<view class="patient-picture">
				<uni-file-picker
					limit="8"
					title="上传病情相关图片 (仅医生可见)"
					file-extname="png,jpg,gif,webp"
					file-mediatype="image"
					:image-styles="{ width: '160rpx', height: '160rpx' }"
					v-model="consultValue.pictures"
				></uni-file-picker>
			</view>
			<view class="next">
				<button class="uni-button" :disabled="!nexStep" @click="nextStep">
					下一步
				</button>
			</view>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	.description-page {
		padding: 30rpx 30rpx 200rpx;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #F6F7F9;
		// position: relative;
		.doctor-online {
			display: flex;
			align-items: flex-start;
			.doctor-avatar {
				width: 110rpx;
				height: 110rpx;
			}
			.doctor-contcat {
				flex: 1;
				margin-left: 30rpx;
				padding-bottom: 30rpx;
				.name {
					margin-left: 20rpx;
					margin-bottom: 10rpx;
				}
				.message {
					padding: 30rpx;
					background-color: #f6f6f6;
					color: #6f6f6f;
					font-size: 26rpx;
					border-radius: 20rpx;
					line-height: 1.5;
				}
				.tips {
					font-size: 22rpx;
					margin: 20rpx 0;
					color: #6f6f6f;
				}
				.icon-shield {
					font-size: 28rpx;
					margin-right: 5rpx;
				}
			}
		}
		.patient-info {
			.input {
				width: 100%;
				height: 240rpx;
				box-sizing: border-box;
				background-color: #f6f6f6;
				border-radius: 20rpx;
				padding: 20rpx;
			}
		}
		.consult {
			margin: 30rpx 0;
		}
		.tags {
			display: flex;
			margin-bottom: 30rpx;
			.tag {
				text-align: center;
				background-color: #f6f6f6;
				padding: 10rpx 15rpx;
				margin-right: 30rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #6f6f6f;
				border: 1rpx solid transparent;
				&.active {
					color: #2cb5a5;
					border-color: #2cb5a5;
					background-color: rgba(44, 181, 165, 0.1);
				}
			}
		}
		.next {
			position: fixed;
			padding: 30rpx 40rpx;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #F6F7F9;
			z-index: 100;
		}
	}
	:deep(.file-picker__box-content) {
		background-color: #f6f6f6 !important;
		border: none !important;
		border-radius: 10rpx !important;
	}
	:deep(.file-picker__progress) {
		display: none;
	}
	:deep(.icon-del-box) {
		width: 40rpx !important;
		height: 40rpx !important;
		top: 0rpx !important;
		right: 0rpx !important;
	}
	:deep(.icon-add) {
		width: 60rpx !important;
		height: 4rpx !important;
		background-color: #ccc !important;
	}
</style>
